<template>
  <div class="container">
      <div class="card">
        <div class="card-header">
             <h3 v-if="length>0">你还有{{length}}件事情要完成</h3>
             <h3 v-else class="text-success">今天的任务完成啦！</h3>
             <input type="text" class="form-control" v-model="thing" placeholder="请输入要做的事情" @keyup.enter="addThing(thing)">
        </div>
      <div class="card-body">
        <ul class="list-group">
          <li class="list-group-item d-flex justify-content-between align-items-center" v-for="(item,index) in thingArr" :key="item.id" >
              <div class="form-check" >
                    <input class="form-check-input" type="checkbox"  :id='"exampleRadios"+index'  v-model="item.checked" >
                    <!-- {{item.checked}} -->
                    <label class="form-check-label" :for='"exampleRadios"+index'>
                      <span :class="[item.checked==true?'doneActive':'']">{{item.name}}</span>
                      <!-- <span class="doneActive">{{item.name}}</span> -->
                    </label>
              </div>
            
            
            <button type="button" class="btn btn-danger" @click="del(index)">删除</button>
          </li>
      
          </ul>
      </div>
      </div>

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  data() {
    return {
      thing:'',
      thingArr:[
        {
          id:100,
          name:'打篮球',
          checked:true,
        },
        {
          id:101,
          name:'学习Vue',
          checked:false,
        },
        {
          id:102,
          name:'学习React',
          checked:false,
        },
      ]
    }
  },
  computed: {
    length:{
      get(){
          // let count=0;
          // this.thingArr.forEach((item)=>{
          //   console.log(item);
          //   if(item.checked==false) count++
          // })
          // return count
          return this.thingArr.filter(item=>{
                return item.checked==false
          }).length
      },

    }
  },
  methods: {
    addThing(thing){
      let id;
      if(this.thingArr.length>0){
         id = this.thingArr[this.thingArr.length-1].id;
      }else{
        id = 100
      }
        
        // console.log(id);
        if(thing.length==0){
            alert("不能为空！")
            return;
        }
        let obj = {}
        id++
        obj.id=id
        obj.name=thing
        obj.checked=false
        // this.thingArr.push(obj)
        this.$set(this.thingArr,this.thingArr.length,obj)
        this.thing=""
    },
    del(index){
      this.thingArr.splice(index,1)
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.doneActive{
  text-decoration:line-through;
  color: #999;
}
</style>
